<template>
    <Layout class="layout-container">
        <Content>
            <Layout class="layout-container">
                <Content ref="container"></Content>
            </Layout>
        </Content>
    </Layout>
</template>
<script type="text/javascript">
import { Layout, Content } from 'view-design';
import { loadMicroApp } from 'qiankun';

const embedCache = {};

export default {
    props: {
        params: Object
    },
    data() {
        return {
        	id: ''
        };
    },
    mounted() {
        const me = this;
        const params = this.params || this.$route.params;
        if(params && params.link) {
            const link = params.link;
            const script = link.substring(link.length - 3) == '.js';
            const container = this.$refs.container.$el;
            this.id = params.id;
            embedCache[this.id] = loadMicroApp({
                name: this.id,
                entry: script ? { scripts: [link] } : link,
                container,
                props: {
                    //单点登录认证信息, 待开发
                    fetchOAuth2Code(client_id, callback = (code) => {}) {
                        //模拟返回OAuth2认证的code
                        callback('oauth-222222222222222222222222');
                    },
                    callback() {
                        me.$emit("callback", arguments);
                    },
                    close() {
                        me.$emit("close");
                    }
                }
            });
        }
    },
    beforeDestroy() {
        embedCache[this.id].mountPromise.then(() => {
        	embedCache[this.id].unmount();
        	delete embedCache[this.id];
        });
    },
    components: {
        Layout,
        Content
    }
}
</script>